<template>
  <div>
    <div class="layout-box">
      <div class="layout-box-header">
        <i class="icon-layout-box-title" />
        项目中用到的按钮
      </div>

      <div class="layout-box-content">
        <el-row>
          <el-button type="primary" class="search-btn">搜索</el-button>
          <el-button plain class="reset-btn">重置</el-button>
        </el-row>
        <el-row class="mt10">
          <el-button
            type="success"
            class="add-btn"
          ><i class="handle—add" /> 新增</el-button>
          <el-button
            type="success"
            class="add-information-btn"
          ><i class="add-information-icon" /> 新增</el-button>
          <el-button
            type="success"
            class="edit-information-btn"
          ><i class="edit—add" /> 编辑</el-button>
        </el-row>

        <el-row class="mt10">
          <el-button type="text">文字按钮</el-button>
          <el-button type="text" disabled>文字按钮</el-button>
        </el-row>

        <el-row class="mt10">
          <el-button type="primary" icon="el-icon-edit">编辑</el-button>
          <el-button type="success" icon="el-icon-share">分享</el-button>
          <el-button type="info" icon="el-icon-delete">删除</el-button>
        </el-row>

        <el-row class="mt10">
          <el-button type="primary" :loading="true">加载中</el-button>
        </el-row>
      </div>
    </div>

    <div class="layout-box">
      <div class="layout-box-header">
        <i class="icon-layout-box-title" />
        其他按钮
      </div>

      <div class="layout-box-content">
        <el-row class="mt10">
          <el-button plain>朴素按钮</el-button>
          <el-button type="primary" plain>主要按钮</el-button>
          <el-button type="success" plain>成功按钮</el-button>
          <el-button type="info" plain>信息按钮</el-button>
          <el-button type="warning" plain>警告按钮</el-button>
          <el-button type="danger" plain>危险按钮</el-button>
        </el-row>

        <el-row class="mt10">
          <el-button round>圆角按钮</el-button>
          <el-button type="primary" round>主要按钮</el-button>
          <el-button type="success" round>成功按钮</el-button>
          <el-button type="info" round>信息按钮</el-button>
          <el-button type="warning" round>警告按钮</el-button>
          <el-button type="danger" round>危险按钮</el-button>
        </el-row>

        <el-row class="mt10">
          <el-row>
            <el-button size="medium" disabled>默认按钮</el-button>
            <el-button type="primary" size="small" disabled>主要按钮</el-button>
            <el-button type="success" size="mini" disabled>成功按</el-button>
            <el-button type="info" disabled>信息按钮</el-button>
            <el-button type="warning" disabled>警告按钮</el-button>
            <el-button type="danger" disabled>危险按钮</el-button>
          </el-row>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Button01',
  props: {},
  data() {
    return {}
  },
  computed: {},
  mounted() {

  },
  methods: {}
}
</script>

<style lang="stylus" scoped></style>
